<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>城市太阳智慧设施优化控制</title>
    <link rel="stylesheet" href="css/base.css">
    <style>
        .table_p td {
            width: 8%;
        }

        .newhead {
            width: 1500px;
        }

        .sound {
            /* position: absolute;
            top: 70px;
            left: 80%; */
            font-size: 20px;
        }

        .sound img {
            height: 80px;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <!--顶部-->
    <header class="header left">
        <div class="left nav">
            <ul>
                <li class="nav_active"><i class="nav_1"></i><a href="index.html">总体概况</a> </li>
                <li><i class="nav_2"></i><a href="carContrl.html">视频监控</a> </li>
                <li><i class="nav_3"></i><a href="map.html">报警管理</a> </li>
            </ul>
        </div>
        <div class="header_center left">
            <h2><strong>智慧灯杆管理平台</strong></h2>
            <p class="color_font"><small>Comprehensive service platform for smart tourism</small></p>
        </div>
        <div class="right nav text_right">
            <ul>
                <li><i class="nav_7"></i><a href="static.html">环境监测</a> </li>
                <li><i class="nav_8"></i><a href="message.html">广告投放</a> </li>
                <li><i class="nav_4"></i><a href="table2.html">灯杆管理</a> </li>
            </ul>
        </div>
        <!--<nav class="left nav">-->
        <!--<ul>-->
        <!--<li class="nav_active"><i class="nav_1"></i><a href="index.html">使用情况概览</a> </li>-->
        <!--<li><i class="nav_2"></i><a href="carContrl.html">车辆监控</a> </li>-->
        <!--<li><i class="nav_3"></i><a href="map.html">报警管理</a> </li>-->
        <!--<li><i class="nav_4"></i><a href="javascript:void(0)">灯杆管理</a><ul class="li_ul">-->
        <!--<li><a href="table2.html">表格一</a> </li>-->
        <!--<li><a href="table2.html">表格二</a> </li>-->

        <!--</ul> </li>-->
        <!--&lt;!&ndash;<li><i class="nav_5"></i><a href="#">车载视频</a> </li>&ndash;&gt;-->
        <!--&lt;!&ndash;<li><i class="nav_6"></i><a href="#">视频监控</a> </li>&ndash;&gt;-->
        <!--<li><i class="nav_7"></i><a href="static.html">环境监测</a> </li>-->
        <!--<li><i class="nav_8"></i><a href="message.html">广告投放</a> </li>-->
        <!--</ul>-->
        <!--</nav>-->
    </header>
    <!--内容部分-->
    <div class="con left">
        <!-- 选择时间 -->
        <div class="select_time newhead">
            <div class="static_top left">
                <i></i><span>总体概况</span>
            </div>

        </div>
        <!--数据总概-->
        <div class="con_div">
            <div class="con_div_text left">
                <div class="con_div_text01 left">
                    <img src="img/info_1.png" class="left text01_img" />
                    <div class="left text01_div">
                        <p>灯杆总数</p>
                        <p>2</p>
                    </div>
                </div>
                <div class="con_div_text01 right">
                    <img src="img/info_2.png" class="left text01_img" />
                    <div class="left text01_div">
                        <p>灯杆运行数</p>
                        <p>2</p>
                    </div>
                </div>
            </div>
            <div class="con_div_text left">
                <div class="con_div_text01 left">
                    <img src="img/info_4.png" class="left text01_img" />
                    <div class="left text01_div">
                        <p>用电情况(千瓦时/天)</p>
                        <p class="sky">300</p>
                    </div>
                </div>
                <div class="con_div_text01 right">
                    <img src="img/info_5.png" class="left text01_img" />
                    <div class="left text01_div">
                        <!-- <p>清洁能源占比(%)</p> -->
                        <p>光照强度</p>
                        <p class="sky">40</p>
                    </div>
                </div>
            </div>
            <div class="con_div_text left">
                <div class="con_div_text01 left">
                    <img src="img/info_6.png" class="left text01_img" />
                    <div class="left text01_div">
                        <!-- <p>空气质量AQI</p> -->
                        <p>PM2.5</p>
                        <p class="org">优(<scan class="PM2_5_data org">37</scan>)</p>
                    </div>
                </div>
                <div class="con_div_text01 right">
                    <img src="img/info_7.png" class="left text01_img" />
                    <div class="left text01_div">
                        <p>PM10</p>
                        <p class="PM10_data org">17</p>
                    </div>
                </div>
            </div>
        </div>
        <!--  -->
        <div class="table_warp">
            <div class="div_any_child">
                <!--<div class="div_any_title"><img src="img/title_4.png">行驶时长排名前5位 </div>-->
                <div class="table_p">
                    <table>
                        <thead>
                            <tr>
                                <th>灯杆</th>
                                <th>电压</th>
                                <th>电量</th>
                                <th>光强</th>
                                <th>温度</th>
                                <th>湿度</th>
                                <th>噪声</th>
                                <th>PM2.5</th>
                                <th>PM10</th>
                                <th>经度</th>
                                <th>纬度</th>
                                <th>时间</th>
                                <th>报警</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><button class="btn lamp_status_open">001</button></td>
                                <td><span class="lampdata voltage_data"></span></td>
                                <td><span class="lampdata electronic_data"></span></td>
                                <td><span class="lampdata light_data"></span></td>
                                <td><span class="lampdata temperature_data"></span></td>
                                <td><span class="lampdata humidity_data"></span></td>
                                <td><span class="lampdata noise_data"></span></td>
                                <td><span class="lampdata PM2_5_data"></span></td>
                                <td><span class="lampdata PM10_data"></span></td>
                                <td><span class="lampdata longitude_data"></span></td>
                                <td><span class="lampdata latitude_data"></span></td>
                                <td><span class="lampdata datatime"></span></td>
                                <td> <!-- 报警 -->
                                    <div class="sound">
                                        <div>
                                            <button class="audioplay1"
                                                style="background-color: transparent;border-style: none;cursor: pointer;"><img
                                                    src="./img/nosound.png" alt=""></button>
                                            <button class="audiopause1 hidden"
                                                style="background-color: transparent;border-style: none;cursor: pointer;"><img
                                                    src="./img/sound.gif" alt=""></button>
                                            <audio class="soundaudio" src="./video/7711.wav" loop="loop"></audio>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td><button class="btn1 lamp_status_close">002</button></td>
                                <td><span class="lampdata voltage_data1"></span></td>
                                <td><span class="lampdata electronic_data1"></span></td>
                                <td><span class="lampdata light_data1"></span></td>
                                <td><span class="lampdata temperature_data1"></span></td>
                                <td><span class="lampdata humidity_data1"></span></td>
                                <td><span class="lampdata noise_data1"></span></td>
                                <td><span class="lampdata PM2_5_data1"></span></td>
                                <td><span class="lampdata PM10_data1"></span></td>
                                <td><span class="lampdata longitude_data1"></span></td>
                                <td><span class="lampdata latitude_data1"></span></td>
                                <td><span class="lampdata datatime1"></span></td>
                                <td> <!-- 报警 -->
                                    <div class="sound">
                                        <div>
                                            <button class="audioplay2"
                                                style="background-color: transparent;border-style: none;cursor: pointer;"><img
                                                    src="./img/nosound.png" alt=""></button>
                                            <button class="audiopause2 hidden"
                                                style="background-color: transparent;border-style: none;cursor: pointer;"><img
                                                    src="./img/sound.gif" alt=""></button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--统计分析图-->
        <div class="div_any">
            <div class="left div_any01">
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_2.png">路灯使用情况 </div>
                    <p id="char2" class="p_chart"></p>
                </div>
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_1.png">报警类型统计 </div>
                    <p id="char1" class="p_chart"></p>
                </div>
            </div>
            <div class="div_any02 left ">
                <div class="div_any_child div_height">
                    <div class="div_any_title any_title_width"><img src="img/title_3.png">灯杆所在位置地图 </div>
                    <div id="map_div"></div>
                </div>
            </div>
            <div class="right div_any01">
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_4.png">能源消耗统计 </div>
                    <p id="char3" class="p_chart"></p>
                </div>
                <div class="div_any_child">
                    <div class="div_any_title"><img src="img/title_5.png">环境污染指数 </div>
                    <p id="char4" class="p_chart"></p>
                </div>
            </div>
        </div>
        <!--分析表格-->
        <!-- <div class="div_table">
        <div class="left div_table_box">
            <div class="div_any_child">
                <div class="div_any_title"><img src="img/title_4.png">行驶里程排名前5位 </div>
                <div class="table_p">
                    <table>
               <thead><tr>
                   <th>排名</th>
                   <th>车牌号</th>
                   <th>里程数（km）</th>
               </tr>
               </thead>
                <tbody>
                <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                </tbody>
            </table>
                </div>

            </div>
        </div>
        <div class="left div_table_box">
            <div class="div_any_child">
                <div class="div_any_title"><img src="img/title_4.png">行驶次数车辆前5位 </div>
                <div class="table_p">
                    <table>
                        <thead><tr>
                            <th>排名</th>
                            <th>车牌号</th>
                            <th>次数（km）</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="left div_table_box">
            <div class="div_any_child">
                <div class="div_any_title"><img src="img/title_4.png">行驶最高时速前5位 </div>
                <div class="table_p">
                    <table>
                        <thead><tr>
                            <th>排名</th>
                            <th>车牌号</th>
                            <th>时速（km）</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="left div_table_box">
            <div class="div_any_child">
                <div class="div_any_title"><img src="img/title_4.png">行驶时长排名前5位 </div>
                <div class="table_p">
                    <table>
                        <thead><tr>
                            <th>排名</th>
                            <th>车牌号</th>
                            <th>时长（km）</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td>京A12345</td><td>134.2</td></tr>
                        <tr><td>1</td><td><a href="http://www.bootstrapmb.com/">京A12345</a></td><td>134.2</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div> -->
    </div>
    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/echarts-all.js"></script>
    <script src="js/base.js"></script>
    <script src="js/index.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
    <script src="js/map.js"></script>
</body>

</html>